<style lang="less">
.page-login,
.login-particles,
.login-particles canvas{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.page-login{
    background: #324057;
    position: fixed;
    z-index: 99;
}

.login-panel{
    width: 440px;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 44%;

    h1{
        color: #333;
        font-size: 1.4em;
        font-weight: normal;
        margin: 0;
    }

    .login-forge-pwd{
        margin: -60px 0 0 auto;
        width: 50%;
        text-align: right;
    }

    .el-input{
        width: 100%;
    }
    .el-input-group__prepend{
        width: 5.2em;
        text-align: left;
    }
    .el-button--primary{
        padding: 11px 28px;
    }
}
</style>
<template>
    <div class="page-login">
        <div class="login-particles" id="login-particles"></div>

        <el-card class="login-panel" :rules="rules" v-loading="!session.$resolved" element-loading-text="登录中..">
            <div slot="header">
                <h1>酒店管理系统<em v-if="isDev"> - DEV</em></h1>
            </div>

            <el-form class="login-form" ref="form" :model="session" label-width="0" @submit.native.prevent="login()">
                <el-form-item prop="username">
                    <el-input size="large" placeholder="登录账号" v-model="session.account" :autofocus="true">
                        <template slot="prepend">登录账号:</template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="large" type="password" placeholder="密码" v-model="session.pwd">
                        <template slot="prepend">密码:</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="large" native-type="submit" type="primary" :loading="!session.$resolved">登录</el-button>
                </el-form-item>
                <el-form-item class="login-forge-pwd">
                    <el-button type="text" :plain="true" @click="findPassword()">忘记密码？</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import $ from 'jquery';
import TTXS from '../common/ttxs';
import URL from '../services/url';
import SeesionModel from '../models/session';

export default {
    data() {
        return {
            isDev: location.host.indexOf('dev') > -1,

            session: new SeesionModel({
                account: '',
                pwd: ''
            }),
            rules: {
                account: [{ required: true, message: '请填写账号', trigger: 'blur' }],
                pwd: [{ required: true, message: '请填写密码', trigger: 'blur' }],
            }
        };
    },
    methods: {
        redirect() {
            let returnUrl = URL.parse(this.$route.query.return_url || '/');

            this.$router.push({
                path: returnUrl.pathname,
                query: returnUrl.query
            });
        },
        login() {
            return this.session.$save()
            .then(user => {
                user.$resolved = false;

                return TTXS.login(user);
            })
            .then(() => {
                return this.redirect();
            })
            .catch(err => {
                if(err && err.preventDefault) {
                    err.preventDefault();
                }

                TTXS.showError(err);
            });
        },
        findPassword() {
            this.$message.error('未实现 😢');
        },

        initParticles(particlesJS, options) {
            this.$nextTick(() => {
                let elem = $('#login-particles');

                particlesJS(elem.attr('id'), options);

                elem.on('contextmenu', e => e.preventDefault());
                this.$on('destroy', () => {
                    elem.remove();
                });
            });
        }
    },
    created() {
        // logon
        if(TTXS.userId) {
            return this.redirect();
        }

        require([
            'exports?particlesJS!particles.js',
            '../data/login-particles.json'
        ], this.initParticles);
    },
    beforeDestroy() {
        this.$emit('destroy');
    }
};
</script>
